<template>
  <Card :padding="20" dis-hover>
    <div class="search">
      <Form ref="form" :model="formItem" inline :label-width="70">
        <Row>
          <Col>
            <FormItem prop="batch" label="批次">
              <Input v-model="formItem.batch" placeholder="批次" style="width: 150px" />
            </FormItem>
          </Col>
          <Col>
            <FormItem prop="value" label="卡密">
              <Input v-model="formItem.value" placeholder="卡密" style="width: 100px" />
            </FormItem>
          </Col>
          <Col>
            <FormItem prop="name" label="卡密名称">
              <Input v-model="formItem.name" placeholder="卡密名称" style="width: 150px" />
            </FormItem>
          </Col>
          <Col>
            <Space>
              <Button type="primary" @click="initList(1, 15)" icon="md-search">查询</Button>
              <Button type="info" @click="batchAdd" icon="md-add">生成</Button>
              <Button type="success" @click="export_xlxs" icon="md-download">导出</Button>
              <Button type="error" @click="clear" icon="md-refresh">重置</Button>
              <Button type="primary" @click="toogle" :icon="_toogle.data.icon">{{
                _toogle.data.text
              }}</Button>
            </Space>
          </Col>
        </Row>
        <Row v-show="_toogle.data.flag">
          <Col>
            <FormItem prop="userID" label="用户编码">
              <Input v-model="formItem.userID" placeholder="用户编码" style="width: 200px" />
            </FormItem>
          </Col>
          <Col>
            <FormItem prop="phone" label="手机号码">
              <Input v-model="formItem.phone" placeholder="手机号码" style="width: 200px" />
            </FormItem>
          </Col>
          <Col>
            <FormItem prop="status" label="状态">
              <Select v-model="formItem.status" placeholder="状态" style="width: 100px">
                <Option :value="-1" :key="-1">全部</Option>
                <Option :value="0" :key="0">未使用</Option>
                <Option :value="1" :key="1">已使用</Option>
                <Option :value="-2" :key="-2">已作废</Option>
              </Select>
            </FormItem>
          </Col>
          <Col>
            <FormItem prop="type" label="时效">
              <Select v-model="formItem.type" placeholder="时效" style="width: 100px">
                <Option :value="-2" :key="-1">全部</Option>
                <Option :value="-1" :key="-1">年</Option>
                <Option :value="0" :key="0">月</Option>
                <Option :value="1" :key="1">日</Option>
                <Option :value="2" :key="2">小时</Option>
                <Option :value="3" :key="3">分钟</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row v-show="_toogle.data.flag">
          <Col>
            <FormItem prop="create_date" label="创建时间">
              <DatePicker
                v-model="formItem.create_date"
                type="daterange"
                placement="bottom-end"
                placeholder="选择日期范围"
                style="width: 200px"
                @on-change="dateChg1"
              />
            </FormItem>
          </Col>
          <Col>
            <FormItem prop="use_date" label="使用时间">
              <DatePicker
                v-model="formItem.use_date"
                type="daterange"
                placement="bottom-end"
                placeholder="选择日期范围"
                style="width: 200px"
                @on-change="dateChg"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>

    <Table
      :paras="{
        columns: table.columns,
        data: table.data,
        loading: table.load,
        pageNo: formItem.pageNo,
        pageSize: formItem.pageSize,
      }"
    >
      <template #Batch="{ row }">
        <Paragraph style="margin-top: 15px" copyable :copy-config="{ showTip: true }">{{
          row.batch
        }}</Paragraph>
      </template>
      <template #Code="{ row }">
        <Paragraph style="margin-top: 15px" copyable :copy-config="{ showTip: true }">{{
          row.value
        }}</Paragraph>
      </template>
      <template #UserID="{ row }">
        <Paragraph
          v-if="row.userID != ''"
          style="margin-top: 15px"
          copyable
          :copy-config="{ showTip: true }"
          >{{ row.userID }}</Paragraph
        >
        <span v-if="row.userID === ''">暂无</span>
      </template>
      <template #Status="{ row }">
        <Tag color="red" v-if="row.status === 1">已使用</Tag>
        <Tag color="green" v-if="row.status === 0">未使用</Tag>
        <Tag color="warning" v-if="row.status === -2">已作废</Tag>
      </template>
      <template #Type="{ row }">
        <Tag color="primary" v-if="row.type === -1">{{ row.quota }}年</Tag>
        <Tag color="success" v-if="row.type === 0">{{ row.quota }}月</Tag>
        <Tag color="magenta" v-if="row.type === 1">{{ row.quota }}日</Tag>
        <Tag color="cyan" v-if="row.type === 2">{{ row.quota }}小时</Tag>
        <Tag color="blue" v-if="row.type === 3">{{ row.quota }}分钟</Tag>
      </template>
      <template #Action="{ row }">
        <Space>
          <Poptip
            transfer
            confirm
            title="是否作废?"
            @on-ok="cancel(row.value)"
            @on-cancel="cancel"
            ok-text="是"
            cancel-text="否"
          >
            <Tooltip content="作废" placement="top" transfer
              ><Button v-if="row.status" type="error" icon="md-close-circle"></Button
            ></Tooltip>
          </Poptip>
          <!-- <Tooltip content="替换" placement="top" transfer><Button type="primary" icon="md-repeat"
                            @click="click_show(row.codeID)"></Button></Tooltip> -->
        </Space>
      </template>
    </Table>
    <Pager
      :paras="{ total: table.total, page: formItem.pageNo, size: formItem.pageSize }"
      @toPage="initList"
      @toSize="initList"
    >
    </Pager>
    <BatchAdd ref="modal" @refresh="refresh"></BatchAdd>
  </Card>
</template>
<script setup>
import Table from '@/components/system/Table.vue'
import Pager from '@/components/system/Pager.vue'
import http from '@/util/http'
import BatchAdd from './BatchAdd.vue'
let _toogle = reactive({ data: { icon: 'ios-arrow-down', text: '展开', flag: false } })

const toogle = () => {
  _toogle.data.flag = !_toogle.data.flag
  if (!_toogle.data.flag) {
    _toogle.data.icon = 'ios-arrow-down'
    _toogle.data.text = '展开'
  } else {
    _toogle.data.icon = 'ios-arrow-up'
    _toogle.data.text = '折叠'
  }
}
let modal = ref()
let { proxy } = getCurrentInstance()
let form = ref()
let formItem = reactive({
  userID: '',
  phone: '',
  batch: '',
  value: '',
  status: -1,
  name: '',
  type: -2,
  pageSize: 15,
  pageNo: 1,
  create_date: ['', ''],
  use_date: ['', ''],
})
let table = reactive({
  data: [],
  total: 0,
  columns: [
    {
      title: '批次',
      align: 'center',
      key: 'batch',
      slot: 'Batch',
      width: 200,
    },
    {
      title: '卡密',
      align: 'center',
      key: 'value',
      slot: 'Code',
      width: 150,
    },
    {
      title: '卡密名称',
      align: 'center',
      key: 'name',
      width: 150,
    },
    {
      title: '使用时效',
      align: 'center',
      key: 'type',
      slot: 'Type',
      width: 150,
    },
    {
      title: '用户编码',
      align: 'center',
      key: 'userID',
      slot: 'UserID',
      width: 250,
    },
    {
      title: '手机号码',
      align: 'center',
      key: 'phone',
      width: 150,
    },
    {
      title: '创建时间',
      align: 'center',
      key: 'addTime',
      width: 200,
    },
    {
      title: '使用时间',
      align: 'center',
      key: 'updTime',
      width: 200,
    },

    {
      title: '状态',
      align: 'center',
      key: 'status',
      slot: 'Status',
      width: 100,
      fixed: 'right',
    },
    // {
    //     title: "备注",
    //     align: "center",
    //     key: "name",
    //     width: 200,
    // },
    {
      title: '操作',
      slot: 'Action',
      align: 'center',
      width: 100,
      fixed: 'right',
    },
  ],
  load: true,
})

const initList = (page, size) => {
  formItem.pageNo = page
  formItem.pageSize = size
  table.load = true

  http.post('/Basic/SecretKey/PageList', toRaw(formItem), (response) => {
    table.load = false
    table.data = response.data.list
    table.total = response.data.total
  })
}

const refresh = () => {
  initList(1, 15)
}
const clear = () => {
  form.value.resetFields()
}

initList(1, 15)

const batchAdd = () => {
  modal.value.modal_show()
}

const export_xlxs = () => {
  http.excel('卡密导出', '/SecretKey/Export', toRaw(formItem), (response) => {})
}

const cancel = (code) => {
  http.post('/Basic/SecretKey/Cancel', { code: code }, (response) => {
    if (response.data.flag) {
      proxy.$Message.success(response.data.msg)
      refresh()
    } else {
      proxy.$Message.error(response.data.msg)
    }
  })
}
</script>